//由于webpack是基于node进行构建的
var path = require('path')

//导入在内存中生成html页面的插件,自动把打包的bundle注入页面
const htmlWebpackPlugin = require('html-webpack-plugin')

//向外暴露配置文件
module.exports = {
    // mode: 'production',
    mode: 'development',
    entry: path.join(__dirname,'./src/main.js'),//要打包的文件(入口)
    output:{//输出相关配置 (出口)
        path: path.join(__dirname,'./dist'),//打包文件,输出路径
        filename: 'bundle.js'
    },
//    devServer:{//这是配置dev-server命令参数的第二种形式,相对来说,这种方式麻烦一些
//         // --open --port 8001 --contentBase src --hot
//         open: true,//自动打开浏览器
//         port:8001,//设置启动运行端口
//         contentBase:'src',//指定托管根目录
//         hot:true//启用热更新 的第1步
//     },
    plugins:[//配置插件的节点
        // new webpack.HotModuleReplacementPlugin(),//第3步

         new htmlWebpackPlugin({//创建一个在内存中生成html页面插件
            template: path.join(__dirname,'./src/index.html'),//指定模板页面,将来会根据指定的页面路径,去生成内存中的页面
            filename:'index.html'//指定生成的页面的名称
        })
    ],
    module:{//配置所有第三方模块加载器
        rules:[//所有第三方模块的匹配规则
            {test:/\.css$/, use:['style-loader','css-loader']},//正则表达式匹配 处理.css 从右css-loader到左style-loader顺序
            {test:/\.less$/, use:['style-loader','css-loader','less-loader']},//处理.less文件
            {test:/\.scss$/, use:['style-loader','css-loader','sass-loader']},//处理.scss文件
            {test:/\.(jpg|png|gif|bmp|jpeg)$/, use:'url-loader'},//处理图片路径
            //limit给定的值是图片大小,单位byte.  如果图片大小小于给定的值,则图片名称转换为base64的字符串
            // name 是给定的图片名称,ext是指定的后缀名  [hash:8] 截取hash前8位
            {test:/\.(jpg|png|gif|bmp|jpeg)$/, use:'url-loader?limit=图片大小&name=[hash:8]-[name].[ext]'},//处理图片路径
            {test:/\.(ttf|eot|svg|woff|woff2)$/, use:'url-loader'},//处理字体文件
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},//处理class
            {test:/\.vue$/,use:'vue-loader'}//处理 .vue 文件的loader
        ]
    } ,
    resolve:{
        alias:{//修改vue导入时候的包的路径
            "vue$":"vue/dist/vue.js"
        }
    }
}
